<script setup lang="ts">
import { ref, reactive } from "vue";
// import { ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();
const dialogVisible = ref(false);

const checkList = reactive(["答案1"]);

const submitExaminationHandler = () => {
  dialogVisible.value = false;
  router.push("/examinationresult");
};
</script>

<template>
  <main>
    <div class="page-header">
      <div class="page-title">
        <p>错题解析</p>
      </div>
    </div>
    <div class="page-body">
      <div class="answer-header">
        <ul class="answer-info">
          <li>日考</li>
          <li>单选题</li>
          <li>1 / 30</li>
        </ul>
        <!-- <div class="answer-time">剩余时间 00:29</div> -->
      </div>

      <div class="examination-questions">
        <!-- 题目 -->
        <div class="examination-title">
          将描述一下vue2与vue3的核心区别是什么？
        </div>

        <!-- 选项 -->
        <div class="examination-select">
          <el-checkbox-group v-model="checkList">
            <div>
              <el-checkbox model-value="A" label="答案1" />
            </div>
            <div>
              <el-checkbox model-value="B" label="答案2" />
            </div>
            <div>
              <el-checkbox model-value="C" label="答案3" />
            </div>
            <div>
              <el-checkbox model-value="D" label="答案4" />
            </div>
          </el-checkbox-group>
        </div>
        <p>
          正确答案 <span class="answer-right">A</span>，你的答案
          <span class="answer-wrong">B（错误）</span>
        </p>
      </div>

      <div class="answer-footer">
        <div class="answer-pagination">
          <el-button type="primary" size="small" class="gxan-btn-on" round
            >上一题</el-button
          >
          <el-button type="primary" size="small" class="gxan-btn-on" round
            >下一题</el-button
          >
          <!-- <el-button size="small" class="gxan-btn-on" round @click="dialogVisible = true">提交试卷</el-button> -->
        </div>
        <div class="all-answer">
          <p>开始答题</p>
          <ul class="current-answer-list">
            <li class="on">1</li>
            <li class="wrong">2</li>
            <li>3</li>
          </ul>
        </div>
      </div>
    </div>
  </main>

  <el-dialog
    v-model="dialogVisible"
    align-center
    :show-close="false"
    width="60%"
    class="answer-dialog"
  >
    <p>交卷即可查看试卷全部答案及解析，是否立即交卷</p>
    <template #footer>
      <div class="answer-dialog-footer">
        <el-button type="primary" @click="submitExaminationHandler"
          >确认交卷</el-button
        >
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
@import "@/assets/scss/global.scss";

.answer-header {
  display: flex;
  justify-content: space-between;

  .answer-info {
    display: flex;

    li {
      height: 20px;
      line-height: 20px;
      padding: 0 10px;
      border: 1px solid #ddd;
      border-radius: 2px;
      margin-right: 20px;
      font-size: 12px;
    }
  }

  .answer-time {
    color: $color-theme;
  }
}

.examination-questions {
  margin-top: 20px;

  .examination-title {
    margin-bottom: 10px;
  }

  .answer-right {
    color: $color-theme;
  }
  .answer-wrong {
    color: red;
  }
}

.answer-footer {
  padding: 20px 0;

  .answer-pagination {
    display: flex;
    justify-content: flex-end;
  }

  .all-answer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;

    .current-answer-list {
      margin-top: 10px;
      display: flex;

      li {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border: 1px solid #666;
        margin-right: 10px;
        margin-bottom: 10px;
        color: #666;
      }

      .on {
        background-color: $color-theme;
        color: #fff;
        border: none;
      }

      .wrong {
        background-color: red;
        color: #fff;
        border: none;
      }
    }
  }
}

.answer-dialog {
  p {
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    padding: 60px 0;
  }

  .answer-dialog-footer {
    display: flex;
    justify-content: center;

    button {
      margin: 0 20px;
    }
  }
}
</style>
